import MyEmojiPicker from '@/components/CommonEditor/MyEmojiPicker';
import { SmileOutlined } from '@ant-design/icons';
import { Popover, Space } from 'antd';
import { useState } from 'react';

interface Props {
  callback: (val: string) => void;
}

const CommonEditor: React.FC<Props> = (props) => {
  const { callback } = props;
  const [emojiVisible, setEmojiVisible] = useState<boolean>(false);

  const handleEmojiInput = (val: string) => {
    callback(val);
    setEmojiVisible(false);
  };

  return (
    <Popover
      content={<MyEmojiPicker onEmojiSelect={handleEmojiInput} />}
      title={null}
      trigger="click"
      open={emojiVisible}
      arrow={false}
      onOpenChange={(open) => {
        setEmojiVisible(open);
      }}
    >
      <Space size={4}>
        <SmileOutlined />
        <span>表情</span>
      </Space>
    </Popover>
  );
};
export default CommonEditor;
